{% extends "base.html" %}

{% block title %}Memo{% endblock %}

{% block sidebar %}{% endblock %}

{% block style%}
.question {
    margin: 2px;
    padding: 2px;
    border: 1px solid blue;
    width: 800px;
    display: block;
}
img{
    height: 15px;
}
.tip{
    border: 1px solid green;
    display: inline;
}
.htip{
    border: 1px solid green;
    display: none;
}
{% endblock %}

{% block script%}
    var passed_items = new Array();
    var done_items = new Array();
    function check(id, ans) {
        input=document.getElementById("input-"+id);
        judge = document.getElementById("judge-"+id);
        ques = document.getElementById("question");
        if (input.value == ans) {
            judge.src="pic/right.jpg"
            judge.alt="right"
            pass(id)
        } else if (input.value == 'done') {
            judge.src="pic/right.jpg"
            judge.alt="done"
            done(id)
        } else {
            judge.src="pic/wrong.jpg"
            judge.alt="wrong"
            fail(id)
        }
    }

    function toggle(id, type) {
        abox=document.getElementById(id);
        abox.style.display = type
    }
    function done(id) {
        done_items.push(id);
        fbutton = document.getElementById("finish-button")
        fbutton.href+="?id="+id;
    }
    function pass(id) {
        passed_items.push(id);
        fbutton = document.getElementById("finish-button")
        fbutton.href+="?id="+id;
    }
    function finish() {
        if (passed_items.length>0 || done_items.length>0) {
            addr="memo?action=finish"
            if (passed_items.length>0) {
                addr+="&r"+passed_items.join("=pass&r")+"=pass"
            }
            if (done_items.length>0) {
                addr+="&r"+done_items.join("=done&r")+"=done"
            }
            window.location=addr
        }
    }

{% endblock %}

{% block content %}

<a href="/memo">Memo</a> <a href="/memo?action=export">Export</a>
<br>

{% for item in items %}
    <br>
    <div class="question" id="question-{{item.id}}">{{item.answer}}</div>
    r{{item.round}}
    <input type="text" id="input-{{item.id}}" onkeyup='check({{item.id}}, "{{item.word}}")' />
    <img id="judge-{{item.id}}" src="pic/wrong.jpg" alt="todo" />
    <img src="pic/sound.jpg" onMouseOut="toggle('phonetic-'+{{item.id}}, 'none')" onMouseOver="toggle('phonetic-'+{{item.id}}, 'inline')" />
    <span class="htip" id="phonetic-{{item.id}}" >{{item.phonetic}}</span>
    <img src="pic/text.jpg" onMouseOut="toggle('usage-'+{{item.id}}, 'none')" onMouseOver="toggle('usage-'+{{item.id}}, 'inline')" />
    <span class="tip" id="usage-{{item.id}}" >{{item.question}}</span>
    <img src="pic/spelling.jpg" onMouseOut="toggle('spelling-'+{{item.id}}, 'none')" onMouseOver="toggle('spelling-'+{{item.id}}, 'inline')" />
    <span class="htip" id="spelling-{{item.id}}" >{{item.word}}</span>
    <br>
{% endfor %}

<button onclick="finish()">Finish this round</button>

<form method="post" action="/memo">
    Question:<br>
    <textarea name="question" rows=1 cols=80></textarea> <br>
    Answer:<br>
    <textarea name="answer" rows=3 cols=80></textarea> <br>
    <input type="submit" value="Add item"/>
</form>

{% endblock %}
